<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="_xsrf" content="{{.xsrf_token}}"/>
	<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<title>{{.title}}</title>
	<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css">
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/css/SUI.css">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css">
    <link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
	<style type="text/css">
		/*.suiUiBox { opacity: 0; z-index: -9; }*/
		.suiUiBox{background:transparent;}
		.suiUiBox .mask{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 1000;background:rgba(0,0,0,0.2);}
		.suiUiBox .filter { background-color: #eee; float: right; width: 80vw; height: 100vh; position: relative;z-index: 1001 }
		.suiUiBox.show .filter { animation: filter 0.3s; }
		.suiUiBox.hide .filter { animation: filterHide 0.3s; }
		.suiUiBox .filter input { box-shadow: inset 0px 0px 3px #aaa; border:none; width: 35%; text-align: center; padding: 1px 5px; line-height: 20px; height: 30px; margin: 0 12px; font-size: 9pt; border-radius: 5px; border:1px solid #eee; }
		.suiUiBox .filter p { margin-bottom: 0; background-color: #fff; }
		.suiUiBox .filter .input { margin-bottom: 10px; font-size: 8pt; padding-bottom: 10px; }
		.suiUiBox .filter .butt { width: 80vw; height: 45px; position: fixed; bottom: 0; right: 0; }
		.suiUiBox .filter .butt span { width: 50%; display: block; float: left; line-height: 45px; text-align: center; font-size: 1.1pc; font-weight: 400; background-color: #fff; }
		.suiUiBox .filter .butt span:first-child { background-color: #e54242; color: #fff; }
		.suiUiBox .filter div { overflow: auto; background-color: #fff; }
		.suiUiBox .filter div .label { margin-left: 10px; display: block; float: left; padding: 3px 10px; margin-bottom: 8px; border-radius: 3px; background-color: #ddd; }
		.suiUiBox .filter div .label.ac { background-color: #e54242; color: #fff; font-weight: 400; }
		.suiUiBox .filter div.other div span {  margin-left: 10px; display: block; float: left; padding: 3px 10px; margin-bottom: 8px; border-radius: 3px; background-color: #ddd;  }
		.suiUiBox .filter div.other div span.ac { color: #fff; background-color: #e54242; }
		.filter dl{width: 20%;}
		@keyframes filter{
			from{
				transform: translateX(80vw);
			}
			to{
				transform: translateX(0vw);
			}
		}
		@keyframes filterHide{
			from{
				transform: translateX(0vw);
			}
			to{
				transform: translateX(80vw);
			}
		}
		.noproduct{height: calc(100vh - 95px);background: url('/static/wechat/img/noproduct.png') no-repeat;background-size: 63%;background-position: center;}
		{{if .info}}
		.noproduct{display: none;}
		{{else}}
		.noproduct{display: block;}
		{{end}}
		#price{position: relative;}
		#pirce dt{position: relative;}
		#price .iconfont{font-size: 6pt !important;margin: 0 !important;}
		#price #down{position: absolute;bottom:calc(6pt - 12px);left: 0}
		#price #up{position: absolute;top:calc(6pt - 12px);left: 0}
		#price dt div{position: absolute;height: 40px;width:6pt;top: 0;left: calc(50% + 10pt + 3px);}
		.PrdLineStyle .goto{position: relative;}
		.PrdLineStyle .goto .scadd{color:#e54242;position:absolute;bottom: 8px;right:13px;font-size: 18pt}
		.PrdLineStyle dl .x{position: absolute;top:0px;right:0px;z-index: 9;width: 30px;height: 30px;}
		.PrdLineStyle dd{width: calc(100% - 30vw - 10px);float: right;}
		.search {position: fixed;top: 0;width: 100%;padding: 0 45px;height: 45px;border-bottom: solid 1px #efefef;}
		.search .back {position: absolute;left: 0;width: 45px;height: 100%;line-height: 45px;text-align: center;font-size: 18px;font-weight: 800;}
		.search input {position: relative;width: 100%;margin-top: 7.5px;}
		.filter {margin-top: 46px;}
	</style>
</head>
<body>
	<div class="search">
		<div class="back iconfont icon-fanhui1" onclick="history.go(-1)"></div>
		<form action="/mobile/column/search_result">
			<input type="text" placeholder="请输入您想要搜索的产品~" name="keywords">
		</form>
	</div>
	<div class="filter">
		<dl class="ac sort" data-status=''>
			<dt>综合<!-- <i class="iconfont">&#xe700;</i> --></dt>
			<!-- <dd></dd> -->
		</dl>
		<dl class="sort" data-status='1' id="price">
			<dt>价格 <div><i class="iconfont" id="up">&#xe700;</i>
					<i class="iconfont" id="down">&#xe701;</i></div></dt>
			<!-- <dd></dd> -->
		</dl>
		<dl class="sort" data-status='2'>
			<dt>销量<!-- <i class="iconfont">&#xe701;</i> --></dt>
			<!-- <dd></dd> -->
		</dl>
		<dl class="sort" data-status="3">
			<dt>类别</dt>
		</dl>
		<dl class="chosemore">
			<dt>筛选<i class="iconfont">&#xe816;</i></dt>
			<!-- <dd></dd> -->
		</dl>
	</div>
	<div class="PrdLineStyle">
		{{range $k,$v:=.info}}
		<dl class="goto" data-price="{{$v.price}}" data-sellnum="{{$v.sellnum}}" data-sort="{{$k}}">
			<dt class="goto" href="/mobile/column/product_content?id={{$v.id}}"><img src="{{$v.pathname}}" alt=""></dt>
			<dd>
				<p>{{$v.title}}</p>
				<p>{{range $v.keywords}}<span>{{.}}</span>{{end}}
				<p><span><span>&yen;</span>{{if $v.vprice}}{{$v.vprice}}{{else}}{{$v.price}}{{end}}</span>{{$v.sellnum}}人购买</p>
				<p>{{if $v.gname}}{{$v.gname}} {{else}}{{$.system.name}} {{end}}<a href="/mobile/index/shop?id={{$v.gid}}">进店<i class="iconfont">&#xe7bb;</i></a></p>
			</dd>
			<i class="iconfont scadd" data-id="{{$v.id}}" data-minbuy="{{$v.minbuy}}">&#xe619;</i>
			{{if eq $v.active 1}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/gbuy.png" class="x">
			{{else if eq $v.active 2}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/sales.png" class="x">
			{{end}}
		</dl>
		{{end}}
	</div>
		<div class="noproduct"></div>
	<div class="suiUiBox suiDisn">
		<div class="mask"></div>
		<div class="filter">
			<form id="form">
				<p class="suiTag">价格区间（元）</p>
				<div class="input">
					<input type="text" pattern="[0-9]*" name="min" placeholder="最低价" value="{{.min}}">—<input type="text" pattern="[0-9]*" name="max" placeholder="最高价" value="{{.max}}">
				</div>
				<div class="other">
					<p class="suiTag">品牌</p>
					<div>
						{{range .brand}}
						<span data-id="{{.id}}" class="choose {{if eq .id $.bid}}ac{{end}}">{{.name}}</span>
						{{end}}
						<input type="hidden" name="bid" value="{{.bid}}"> 
					</div>
					{{range $k,$v:=.attribute_column}}
					<p class="suiTag">{{$v.name}}</p>
					<div>
						{{range $v.attribute}}
						<span data-id="{{.id}}" class="choose {{if $v.value}}{{if eq .id $v.value}}ac{{end}}{{end}}">{{.name}}</span>
						{{end}}
						<input type="hidden" name="{{.id}}" value="{{$v.value}}">
					</div>
					{{end}}
				</div>
			</form>
			<div class="butt">
				<span class="buttSure">确定</span>
				<span class="buttCancel">取消</span>
			</div>
		</div>
	</div>
</body>
{{template "wechat/public/share.html" .}}
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
		$('input[name="keywords"]').change(function(){
		$('form').submit()
	})
	$('.sort').click(function(){
		if (status==$(this).attr('data-status')) {
			return false;
		};
		status=$(this).attr('data-status')
		if (status=='1'){
			$(this).attr('data-status',	0)
			$('#down').css('color','#333')
			$('#up').css('color','#e31939')
		}else if(status=='0'){
			$(this).attr('data-status',1)
			$('#up').css('color','#333')
			$('#down').css('color','#e31939')
		}else if(status==''||status=='2'||status=='3'){
			console.log(status)
			$('#up').css('color','#333')
			$('#down').css('color','#333')
		}
		$('.sort').find('.iconfont').html('&#xe701;')
		$(this).find('.iconfont').html('&#xe700;')
		$('#down').html('&#xe701;')
		$('#up').html('&#xe700;')
		$('.sort').attr('class','sort')
		$(this).attr('class','sort ac')
		var form=$('#form').serialize()
		form+=`&status=`+status
		suiUiBox.className = "suiUiBox hide"
		$.ajax({
			url:window.location.href,
			data:form,
			success:function(data){
				page=2
				var res=data.info
				var html=''
				if (res){
					for(var i=0;i<res.length;i++){
						html+=`<dl class="goto" data-price="`+res[i].price+`" data-sellnum="`+res[i].sellnum+`"  data-sort="`+i+`">
						<dt class="goto" href="/mobile/column/product_content?id=`+res[i].id+`"><img src="`+res[i].pathname+`" alt=""></dt> <dd>
						<p>`+res[i].title+`</p><p>`
						if (res[i].keywords){
							for(var j=0;j<res[i].keywords.length;j++){
								html+=`<span>`+res[i].keywords[j]+`</span>`
							}
						}
						html+=`</p><p><span><span>&yen;</span>`
						if(res[i].vprice){
							html+=res[i].vprice
						}else{
							html+=res[i].price
						}
						html+=`</span>`+res[i].sellnum+`人购买</p><p>`
						if(res[i].gname){
							html+=res[i].gname+` `
						}else{
							html+=`{{.system.name}} `
						}
						html+=`<a href="/mobile/store?id=`+res[i].gid+`">进店<i class="iconfont">&#xe7bb;</i></a></p>
					</dd><i class="iconfont scadd" data-id="`+res[i].id+'" data-minbuy="`+res[i].minbuy+`">&#xe619;</i>'
					if (res[i].active==1){
							html+='<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/gbuy.png" class="x"></dl>'
						}else if(res[i].active==2){
							html+='<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/sales.png" class="x"></dl>'
						}else{
							html+=`</dl>`
						}
					}
					$('.noproduct').css('display','none')
					$('.PrdLineStyle').html(html)
					dropload()
				}else{
					$('.PrdLineStyle').html('')
					$('.noproduct').css('display','block')
				}
			},
			error:function(){
				mui.toast("网络慢，请重新刷新!");
			}
		})
	})	
	// function sort(){
	// 	var arr=[]
	// 	$('.goto').each(function(){
	// 		arr.push(this)
	// 	})
	// 	switch(status){
	// 		case "":
	// 		arr.sort(function(a,b){return parseInt(a.getAttribute('data-sort')) -  parseInt(b.getAttribute('data-sort'))});
	// 		break;
	// 		case "0":
	// 		arr.sort(function(a,b){return parseFloat(b.getAttribute('data-price')) - parseFloat(a.getAttribute('data-price'))});
	// 		break;
	// 		case "1":
	// 		arr.sort(function(a,b){return parseFloat(a.getAttribute('data-price')) - parseFloat(b.getAttribute('data-price'))});
	// 		break;
	// 		case "2":
	// 		arr.sort(function(a,b){return parseInt(b.getAttribute('data-sellnum')) -  parseInt(a.getAttribute('data-sellnum'))});
	// 		break;
	// 	}
	// 	$('.PrdLineStyle').html('')
	// 	for(var i=0;i<arr.length;i++){
	// 		$('.PrdLineStyle').append(arr[i])
	// 	}
	// }
	$('.choose').click(function(){
		var data=$(this).attr('data-id')
		var data3=$(this).siblings('input').val()
		var cho=$(this).parent().find('.choose')
		cho.each(function(){
			var data2=$(this).attr('data-id')
			if (data==data2){
				if(data==data3){
					$(this).attr('class','choose')
					$(this).siblings('input').val('')
				}else{
					$(this).attr('class','choose ac')
					$(this).siblings('input').val(data)
				}
			}else{
				$(this).attr('class','choose')
			}
		})
	})
	$('.buttSure').click(function(){
		var form=$('#form').serialize()
		form+=`&status=`+status
		suiUiBox.className = "suiUiBox hide"
		$.ajax({
			url:window.location.href,
			data:form,
			success:function(data){
				page=2
				var res=data.info
				var html=''
				if (res){
					for(var i=0;i<res.length;i++){
						html+=`<dl class="goto" data-price="`+res[i].price+`" data-sellnum="`+res[i].sellnum+`"  data-sort="`+i+`">
						<dt class="goto" href="/mobile/column/product_content?id=`+res[i].id+`"><img src="`+res[i].pathname+`" alt=""></dt> <dd>
						<p>`+res[i].title+`</p><p>`
						if (res[i].keywords){
							for(var j=0;j<res[i].keywords.length;j++){
								html+=`<span>`+res[i].keywords[j]+`</span>`
							}
						}
						html+=`</p><p><span><span>&yen;</span>`
						if(res[i].vprice){
							html+=res[i].vprice
						}else{
							html+=res[i].price
						}
						html+=`</span>`+res[i].sellnum+`人购买</p><p>`
						if(res[i].gname){
							html+=res[i].gname+` `
						}else{
							html+=`{{.system.name}} `
						}
						html+=`<a href="/mobile/store?id=`+res[i].gid+`">进店<i class="iconfont">&#xe7bb;</i></a></p>
						</dd><i class="iconfont scadd" data-id="`+res[i].id+'" data-minbuy="`+res[i].minbuy+`">&#xe619;</i>'
						if (res[i].active==1){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/gbuy.png" class="x"></dl>`
						}else if(res[i].active==2){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/sales.png" class="x"></dl>`
						}else{
							html+=`</dl>`
						}
					}
					$('.noproduct').css('display','none')
					$('.PrdLineStyle').html(html)
				}else{
					$('.PrdLineStyle').html('')
					$('.noproduct').css('display','block')
				}
			},
			error:function(){
				mui.toast("网络慢，请重新刷新!");
			}
		})
	})
var page=2;
var status='';
dropload()
function dropload() {
	$('.element').dropload({
    scrollArea : window,
    threshold: 2,
    loadDownFn : function(me){
    	var form=$('#form').serialize()
    	form+=`&page=`+page+`&status=`+status
        $.ajax({
            type: 'GET',
            url: window.location.href,
            dataType: 'json',
            data:form,
            success: function(data){
   				var res=data.info
               page+=1
              if(res){
              	var godom=document.getElementsByClassName('goto')
              	 var k=parseInt(godom[godom.length-1].getAttribute('data-sort'))
                 for (var i=0;i<res.length;i++){
                 	k=k+1
                    var dl = document.createElement('dl');
                    dl.className="goto"	
                    dl.setAttribute('href',"/mobile/column/product_content?id="+res[i].id)
                    dl.setAttribute('data-price',res[i].price)
                    dl.setAttribute('data-sellnum',res[i].sellnum)
                    dl.setAttribute('data-sort',k)
 					var	html=`<dt  class="goto" href="/mobile/column/product_content?id=`+res[i].id+`"><img src="`+res[i].pathname+`" alt=""></dt>
					<dd>
						<p>`+res[i].title+`</p><p>`
						if (res[i].keywords){
							for(var j=0;j<res[i].keywords.length;j++){
								html+=`<span>`+res[i].keywords[j]+`</span>`
							}
						}
						html+=`</p><p><span><span>&yen;</span>`
						if(res[i].vprice){
							html+=res[i].vprice
						}else{
							html+=res[i].price
						}
						html+=`</span>`+res[i].sellnum+`人购买</p><p>`
						if(res[i].gname){
							html+=res[i].gname+` `
						}else{
							html+=`{{.system.name}} `
						}
						html+=`<a href="/mobile/store?id=`+res[i].gid+`">进店<i class="iconfont">&#xe7bb;</i></a></p>
					</dd><i class="iconfont scadd" data-minbuy="`+res[i].minbuy+`" data-id="`+res[i].id+'">&#xe619;</i>'
					if (res[i].active==1){
						html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/gbuy.png" class="x">`
					}else if(res[i].active==2){
						html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/sales.png" class="x">`
					}
                    dl.innerHTML=html
                    document.getElementsByClassName('PrdLineStyle')[0].appendChild(dl)
                }
                me.resetload();
                }else{
                    mui.toast("没有更多了！");
                    $(".dropload-down").remove();
                }
            },
            error: function(xhr, type){
                mui.toast("网络慢，请重新刷新!");
                me.resetload();
            }
        });
    }
});
	}
	function stopPropagation(e) {  
    if (e.stopPropagation) {  
        e.stopPropagation();  
    } else {  
        e.cancelBubble = true;  
    }  
}  
let scaddIndex = true
mui('body').on('tap','.scadd',function(e){
	stopPropagation(e)
	scaddIndex = !scaddIndex
	if (scaddIndex) return
	var pid=this.getAttribute("data-id")
	var minbuy=this.getAttribute("data-minbuy")
	var data={num:1,pid:pid,minbuy:minbuy}
	mui.get("/mobile/isshopcar",{pid:pid},function(res){
		console.log(res)
		if (minbuy>1 && !res.isshopcar) {
			mui.confirm("该产品为限购产品，起购数量为"+minbuy,"提示",["否","是"],function(res){
				if (res.index==1) {
					mui.post('/mobile/shopcar',data,function(res){
						if(res==2||res==962){
							mui.confirm("您还未登入,请先登入","提示",function(res){
								if(res.index){
									mui.closePopups()
									window.location.href="/mobile/login"
								}
							})
						}else if(res==1){
							mui.toast("添加成功~")
						}else if(res==0){
							mui.toast("网络繁忙,请重试!")
						}else if(res==3){
				          mui.toast('库存不足');
				        }
					})
				} else {
					console.log(res)
				}
			},"div")
		} else {
			mui.post('/mobile/shopcar',data,function(res){
				if(res==2||res==962){
					mui.confirm("您还未登入,请先登入","提示",function(res){
						if(res.index){
							mui.closePopups()
							window.location.href="/mobile/login"
						}
					})
				}else if(res==1){
					mui.toast("添加成功~")
				}else if(res==0){
					mui.toast("网络繁忙,请重试!")
				}else if(res==3){
		          mui.toast('库存不足');
		        }
			})
		}
	})
})
mui('body').on('tap','.goto',function(){
	var u=this.getAttribute('href')
	if(u){
		window.location.href=u
	}
})
mui('body').on('tap','a',function(){
	var u=this.getAttribute('href')
	if(u){
		window.location.href=u
	}
})
	suiUiBox = document.querySelector(".suiUiBox")
	document.querySelector(".chosemore").onclick = function(){
		suiUiBox.className = "suiUiBox show"
	}
	document.querySelector(".buttCancel").onclick = function(){
		suiUiBox.className = "suiUiBox hide"
	}
	var mask=document.getElementsByClassName('mask')[0]
	mask.onclick = function(){
		suiUiBox.className = "suiUiBox hide"
	}
</script>
</html>